<template>
  <van-nav-bar class="header" to="/order" :fixed="true" title="" left-text="订单详情" left-arrow
    @click-left="onClickLeft" />
  <div class="time">
    <div class="one">
      <van-icon name="clock-o" />&nbsp;&nbsp;已完成
    </div>
    <div class="two">2022-11-06&nbsp;&nbsp;&nbsp;11:30:00</div>
  </div>
  <div>
    <div class="box1">
      <div class="one">订单编号:&nbsp;&nbsp;FF20200303</div>
      <div class="two">订单明细</div>
      <van-list finished-text="没有更多了">
        <!-- <p class="orderDel">订单详情</p> -->
        <van-card style="padding-left:0px" v-for="item in Order.list" :num="item.n" :price="item.price" desc="描述信息"
          :title="item.name" :thumb="item.img" />
      </van-list>
      <div class="pay">
        <p>支付方式:&nbsp;&nbsp;微信支付</p>
        <p>下单时间：&nbsp;&nbsp;2022-11-06&nbsp;&nbsp;&nbsp;11:30:00</p>
        <p>支付时间：&nbsp;&nbsp;2022-11-06&nbsp;&nbsp;&nbsp;11:30:00</p>
      </div>
      <div class="price">实付：{{ Order.cartAllInfo.Allprice / 100 }}</div>
      <div class="four">
        <div class="delete">删除订单</div>
        <div class="again" @click="handleDel">再次购买</div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { useOrderDel } from '../../store/orderDel';
const router = useRouter()
const Order = useOrderDel()

const onClickLeft = () => history.back();

const handleDel = () => {
  router.push({
    path: '/orderdel'
  })
}

</script>

<style lang="scss" scoped>
.time {
  margin-top: 46px;
  height: 80px;
  background-color: rgb(227, 83, 83);
  border: 1px solid transparent;

  .one {
    font-size: 16px;
    margin-left: 20px;
    margin-top: 20px;
    color: #fff;
  }

  .two {
    margin-left: 45px;
    font-size: 16px;
    color: #fff;
    margin-top: 10px;
  }
}

.box1 {
  width: 98%;
  margin-left: 20px;

  .one {
    font-size: 16px;
    margin-top: 20px;
  }

  .two {
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .pay {
    font-size: 16px;
  }

  .four {
    line-height: 70px;
    width: 100%;
    text-align: center;
    // background-color: aquamarine;
    display: flex;
    // justify-content: space-between;
    margin-top: 20px;


    .delete {
      width: 100px;
      height: 40px;
      line-height: 40px;
      // background-color: blueviolet;
      margin: 10px;
      margin-left: 120px;
      font-size: 16px;
      border: 1px solid rgb(243, 64, 64);
    }

    .again {
      width: 100px;
      height: 40px;
      line-height: 40px;
      margin-right: 20px;
      background-color: rgb(243, 64, 64);
      margin: 10px;
      float: right;
      font-size: 16px;
      color: #fff;
      border: 1px solid transparent;
    }
  }

}

.price {
  font-size: 16px;
  width: 100px;
}
</style>